<template>
    <div>
        <div style="margin-right: 20px;">
            <div class="table">
                <div class="cell">
                    <div class="left">
                        <div class="circle"></div>
                        <div class="leftline" style="height:30%;top:80%"></div>
                    </div>
                </div>
                <div class="cell" style="padding-top: 20px; width: 100%;">
                    {{ title }}
                </div>
            </div>
            <div class="table">
                <div class="cell">
                    <div class="left">
                        <div class="leftline"></div>
                        <div class="leftline" v-if="tonextlink" style="height:20px;top:100%"></div>
                    </div>
                </div>
                <div class="cell" style="padding-top: 20px; width: 100%;">
                    <div style="box-shadow: 0 3px 10px 0 #aaa;">
                        <slot></slot>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    props: ['tonextlink', 'title'],
}
</script>

  
<style scoped>
.table {
    display: table;
    width: 100%;
}

.cell {
    position: relative;
    display: table-cell;
    vertical-align: top;
}

.left {
    width: 60px;
}

.circle {
    position: absolute;
    top: 50%;
    left: 15px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 5px solid #ccc;
    background-color: white;
    z-index: 2;
}

.leftline {
    position: absolute;
    top: 0;
    left: 22px;
    height: 100%;
    border-left: 5px solid #ccc;
}
</style>